<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ industry.name }} - 股票列表</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        h1 { color: #333; }
        .container { max-width: 1200px; margin: 0 auto; }
        .back-link { margin-bottom: 20px; display: block; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f2f2f2; }
        .summary { margin: 20px 0; padding: 15px; background: #f9f9f9; border-left: 4px solid #4CAF50; }
        .search-box { margin: 20px 0; }
        input[type="text"] { padding: 8px; width: 300px; }
        button { padding: 8px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <a href="/" class="back-link">← 返回行业列表</a>
        
        <h1>{{ industry.name }}</h1>
        
        <div class="summary">
            <strong>行业:</strong> {{ industry.name }}<br>
            <strong>股票总数:</strong> {{ industry.get_stock_count() }}
        </div>
        
        <!-- 新增：行业内股票搜索框 -->
        <div class="search-box">
            <input type="text" id="stockSearchInput" placeholder="搜索股票代码或名称...">
            <button onclick="searchStock()">搜索</button>
        </div>
        
        <h2>股票列表</h2>
        <table id="stockTable">
            <thead>
                <tr>
                    <th>股票代码</th>
                    <th>股票名称</th>
                    <th>当前价格</th>
                </tr>
            </thead>
            <tbody>
                {% for stock in industry.stocks %}
                <tr>
                    <td>{{ stock.code }}</td>
                    <td>{{ stock.name }}</td>
                    <td>{{ stock.price }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 新增：股票搜索脚本 -->
    <script>
        function searchStock() {
            const query = document.getElementById('stockSearchInput').value;
            const industryName = "{{ industry.name }}";
            
            fetch(`/api/search_stock?query=${query}&industry=${encodeURIComponent(industryName)}`)
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.querySelector('#stockTable tbody');
                    tableBody.innerHTML = '';
                    
                    if (data.length === 0) {
                        const row = document.createElement('tr');
                        row.innerHTML = '<td colspan="3">没有找到匹配的股票</td>';
                        tableBody.appendChild(row);
                        return;
                    }
                    
                    data.forEach(stock => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${stock.code}</td>
                            <td>${stock.name}</td>
                            <td>${stock.price}</td>
                        `;
                        tableBody.appendChild(row);
                    });
                });
        }
    </script>
</body>
</html>